<template>
  <!-- 维护作业-保单状态返回页面 -->
  <div class="fillcontain">
    <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="100px" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="被保人" prop="surname">
            <el-input clearable v-model="searchParams.surname" @blur="clearMessage('surname')"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="受理号码" prop="applnum">
            <el-input clearable v-model="searchParams.applnum" @blur="clearMessage('applnum')"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收款凭证号码" prop="wnotnum">
            <el-input clearable v-model="searchParams.wnotnum" @blur="clearMessage('wnotnum')"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保单号码" prop="chdrnum">
            <el-input clearable v-model="searchParams.chdrnum" @blur="clearMessage('chdrnum')"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="text_right">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <!-- 查询结果 -->
      <div class="table_container">
        <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column
              min-width="120"
              property="applnum"
              label="受理号码"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="dtecrt"
              label="受理日期"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="procflg"
              label="处理状况"
              align='left'
              show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select v-model="scope.row.procflg" :formatter="formatterProcflg(scope.row)" disabled placeholder="">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.option"
                    :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="subprocflg"
              label="子状态码"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="appluser_name"
              label="核保人员"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="crtuser_name"
              label="建单人员"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="datime"
              label="最后异动时间"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="chdrnum"
              label="保单号码"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="100"
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="statusReturn(scope.row)">状态返回</el-button> -->
              <span class="operationIcon" @click="statusReturn(scope.row)">
                <el-tooltip class="item" effect="light" content="状态返回" placement="top">
                  <i class="el-icon-back"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  import constant from '@/utils/constant';
  import * as api from '@/api/setting/maintain/policyStatusReturn.js'
  import validRules from "../../../utils/validRules";

  export default {
    data() {
      return {
        valueDate: '',
        // 查询条件
        rules: {
          surname: [
            {validator: validRules.isChineseOrEnglish, message: '请正确输入被保人！', trigger: 'blur'}
          ],
          applnum: [
            {validator: validRules.isEnglishOrNumber, message: '请正确输入受理号码！', trigger: 'blur'}
          ],
          wnotnum: [
            {validator: validRules.isEnglishOrNumber, message: '请正确输入收款凭证号码！', trigger: 'blur'}
          ],
          chdrnum: [
            {validator: validRules.isEnglishOrNumber, message: '请正确输入保单号码！', trigger: 'blur'}
          ],
        },
        searchParams: {
          surname: '',
          applnum: '',
          wnotnum: '',
          chdrnum: '',
        },
        tableData: [],
        loading: false,
        options: [],

        //需要给分页组件传的信息
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      }
    },
    created() {
      this.init();
    },
    mounted() {
    },
    methods: {
      formatterProcflg(row) {
        let _haveProcflg = false;
        this.options.forEach((item) => {
          if (item.value == row.procflg) {
            _haveProcflg = true;
          }
        });
        if (!_haveProcflg) {
          row.procflg = '';
        }
      },

      clearMessage(id) {
        let value = '';
        if ('surname' == id) {
          value = this.searchParams.surname;
          this.resetSearch();
          this.searchParams.surname = value;
        } else if ('applnum' == id) {
          value = this.searchParams.applnum;
          this.resetSearch();
          this.searchParams.applnum = value;
        } else if ('wnotnum' == id) {
          value = this.searchParams.wnotnum;
          this.resetSearch();
          this.searchParams.wnotnum = value;
        } else if ('chdrnum' == id) {
          value = this.searchParams.chdrnum;
          this.resetSearch();
          this.searchParams.chdrnum = value;
        }
      },

      // 查询列表
      getList() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.paginations.total = 0;
            this.tableData = [];
            let para = {
              "surname": this.searchParams.surname,
              "applnum": this.searchParams.applnum,
              "wnotnum": this.searchParams.wnotnum,
              "chdrnum": this.searchParams.chdrnum,
              "pageSize": this.paginations.pageSize,
              "pageNumber": this.paginations.pageIndex,
            }

            if (!para.surname && !para.applnum && !para.wnotnum && !para.chdrnum) {
              this.$message({
                message: '请至少输入一个查询条件来查询！',
                type: 'error'
              });
              return false
            }
            this.$store.dispatch('loading/CHANGE_LOADING', true)

            api.queryList(para).then(res => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
              if (res.resultCode == constant.SUCCESS) {
                if (res.data && res.data.list.length) {
                  this.paginations.total = res.data.total;
                  this.tableData = res.data.list;
                } else {
                  this.$message({
                    message: '无符合条件任务！',
                    type: 'error'
                  });
                }
              }
            }).catch(err => {
              this.$store.dispatch('loading/CHANGE_LOADING', false);
            })
          }
        });
      },
      statusReturn(row) {
        if (row.applnum == null || row.applnum == '') {
          this.$message.error("请选择一条数据");
          return;
        }

        if (row.procflg == '5') {
          this.$message.error("处理状态为未入帐,不能做状态返回");
          return;
        } else if (row.procflg == '6') {
          this.$message.error("处理状态为结案,不能做状态返回");
          return;
        } else if (row.procflg == '4') {
          this.$message.error("处理状态为核决,出盘中,不能做状态返回");
          return;
        }

        this.$confirm('状态返回将清空所有录入信息!确定要对保单' + row.chdrnum + '进行状态返回吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let para = {
            applnum: row.applnum,
            chdrnum: row.chdrnum,
            crttime: row.crttime,
            agntcoy: row.agntcoy,
            cntbranch: row.cntbranch,
            datime: row.datime,
            dtecrt: row.dtecrt,
            user_profile: row.user_profile,
            appltype: row.appltype,
            procflg: row.procflg,
            appluser: row.appluser,
            dateup04: row.dateup04,
            pnappdate: row.pnappdate,
            pnappusr: row.pnappusr,
          }
          api.statusReturn(para).then(res => {
            this.$store.dispatch('loading/CHANGE_LOADING', false)
            if (res.resultCode == constant.SUCCESS) {
              this.$message.success(res.resultMsg);
              this.getList();
            }
          }).catch(err => {
            this.$store.dispatch('loading/CHANGE_LOADING', false);
          })
        }).catch(() => {

        });


      },
      init() {
        api.queryDealStauts().then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
          if (res.resultCode == constant.SUCCESS) {
            this.options = [{option: '请选择', value: ''}, ...res.data];
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },

      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch() {
        this.searchParams.surname = '';
        this.searchParams.applnum = '';
        this.searchParams.wnotnum = '';
        this.searchParams.chdrnum = '';
      }
    },
    computed: {
      ...mapGetters(['tags']),
      reload() {
        return this.$store.state.loading.reload;
      }
    },
    activated() {
      if (this.reload) {
        this.$store.dispatch('loading/CHNAGE_RELOAD', false)
        Object.assign(this.$data, this.$options.data());
      }
    }
  }
</script>

<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;
  }

  .search_container {
    padding: 20px 20px 0 20px;
    //    border-top: 1px solid #e1e1e1;
  }

  .common-box {
    padding-bottom: 15px;
  }

  .common-lab {
    line-height: normal !important;
    text-align: right;

    .labelName {
      text-align: right;
    }
  }
</style>



